<script setup>

</script>

<template>
  <div class="resources_box">
    <div class="h_title wow animate__animated animate__fadeInUp">Resources</div>
    <div class="content_box">
      <div class="first">
        <div class="title wow animate__animated animate__fadeInUp">
          Developer <div>Documentation</div>
        </div>
        <div class="des wow animate__animated animate__fadeInUp">Access Comprehensive Guides And API <br>References</div>
        <div class="prots">
          <div class="wow animate__animated animate__fadeInUp">Quick start guides for ZKC SDK and Node</div>
          <div class="wow animate__animated animate__fadeInUp">Detailed API documentation</div>
          <div class="wow animate__animated animate__fadeInUp">Best practices for developing zk-provable <br>games</div>
        </div>
      </div>
      <div class="two">
        <div class="title wow animate__animated animate__fadeInUp">
          Tutorials And <div>Examples</div>
        </div>
        <div class="des wow animate__animated animate__fadeInUp">Learn Through Hands-On Examples</div>
        <div class="prots">
          <div class="wow animate__animated animate__fadeInUp">Step-by-step tutorials for creating your first <br> ZKCross game</div>
          <div class="wow animate__animated animate__fadeInUp">Sample projects demonstrating key features</div>
          <div class="wow animate__animated animate__fadeInUp">Video walkthroughs of advanced concepts</div>
        </div>
      </div>
      <div class="three"> 
        <div class="title wow animate__animated animate__fadeInUp">
          Community And <div>Support</div>
        </div>
        <div class="des wow animate__animated animate__fadeInUp">Join Our Thriving Developer <br>Community</div>
        <div class="prots">
          <div class="wow animate__animated animate__fadeInUp">Active Discord server for real-time support</div>
          <div class="wow animate__animated animate__fadeInUp">Regular developer meetups and workshops</div>
          <div class="wow animate__animated animate__fadeInUp">Bug bounty program for contributing to our <br>ecosystem</div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.resources_box {
  width: 100%;
  .h_title {
    font-weight: 600;
    font-size: 40px;
    color: #000000;
    padding-left: 2.6%;
  }
  .content_box {
    background: #F7F7F7;
    border-radius: 15px;
    border: 1px solid #DEDEDE;
    padding: 4.37% 2.6%;
    display: flex;
    margin-top: 3.2%;
    >div {
      flex: 1;
      border-radius: 30px;
      margin-right: 1.5%;;
      padding: 2.08% 2.08% 3.44% 2.08%; 
      &:last-child {
        margin-right: 0px;
      }
      .title {
        font-weight: 600;
        font-size: 40px;
        line-height: 48px;
      }
      .des {
        font-weight: 500;
        font-size: 25px;
        margin-top: 26px;
        line-height: 30px;
      }
      .prots {
        margin-top: 14.89%;
        padding-bottom: 20px;
        font-weight: 300;
        font-size: 20px;
        color: #0E0E0E;
        padding-left: 10px;
        div {
          position: relative;
          margin-top: 10px;
          &::before {
            position: absolute;
            content: "";
            left: -10px;
            top: 7px;
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: #269AAA;
          }
        }
      }
    }
    .first {
      background: linear-gradient( 180deg, #D7F6F9 0%, #F7F7F7 93%);
      .title {
        color: #269AAA;
      }
      .des {
        color: #0F525C;
      }
    }
    .two {
      background: linear-gradient( 180deg, #DEE2F2 0%, rgba(215,219,238,0) 100%);
      .title {
        color: #6E83D8;
      }
      .des {
        color: #253C96;
      }
      .prots {
        div {
          &::before {
            background: #6E83D8;
          }
        }
      }
    }
    .three {
      background: linear-gradient( 180deg, #F0BDBD 0%, rgba(226,83,83,0) 100%);
      .title {
        color: #CD5959;
      }
      .des {
        color: #771616;
      }
      .prots {
        div {
          &::before {
            background: #CD5959;
          }
        }
      }
    }
  }
}
</style>
